<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('监控')"/>
    <link href="/admin/css/other/console2.css" rel="stylesheet"/>
    <style>
        .pear-text {
            font-size: 16px !important;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        主机信息
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">核心数</div>
                                    <div class="count pear-text" id="cpuNum"></div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">空闲率</div>
                                    <div class="count pear-text" id="free" ></div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">等待率</div>
                                    <div class="count pear-text" id="wait" ></div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">使用率</div>
                                    <div class="count pear-text" id="used" ></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        内存监控
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">空闲内存</div>
                                    <div class="count pear-text" id="memFree" ></div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">最大内存</div>
                                    <div class="count pear-text" id="totalMem" ></div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">已用内存</div>
                                    <div class="count pear-text" id="usedMem" ></div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">内存使用</div>
                                    <div class="count pear-text" id="rate"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">访客流量</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">主机信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="nob">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>地址</th>
                                <th>系统</th>
                                <th>模型</th>
                                <th>JDK</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td name="sysInfoComputerName"></td>
                                    <td name="sysInfoComputerIp"></td>
                                    <td name="sysInfoOsName"></td>
                                    <td name="sysInfoOsArch"></td>
                                    <td name="jvmInfoVersion" >JDK</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">磁盘信息</div>
            <div class="layui-card-body">
                <ul class="pear-card-status" id="sysFiles">
                </ul>
            </div>
        </div>

    </div>
</div>
<th:block th:include="include :: footer"/>
<script type="application/javascript" src="/admin/js/sys_line.js"></script>
<script>
    layui.use(['layer', 'echarts','count','common','http'], function () {
        let $ = layui.jquery,
            echarts = layui.echarts;
        let common = layui.common
        let http = layui.http
        let count = layui.count

        $("body").on("click", "[data-url]", function () {
            parent.layui.tab.addTabOnlyByElem("content", {
                id: $(this).attr("data-id"),
                title: $(this).attr("data-title"),
                url: $(this).attr("data-url"),
                close: true
            })
        })
        let echartData = []
        let loadedDom = false
        loadData()
        setInterval(loadData,7*1000)


        function loadData(){
            http.get("/monitor/getCpuInfo",{}).then(res=>{
                let result = res.data
                setNumTxt('cpuNum',result.cpuNum,'核')
                setNumTxt('free',result.free,'%')
                setNumTxt('wait',result.wait,'%')
                setNumTxt('used',result.used,'%')
                setNumTxt('memFree',result.memInfo.free,'G',2)
                let used = result.memInfo.used
                let total = result.memInfo.total
                let jvmInfoTotal = result.jvmInfoTotal
                setNumTxt('usedMem',used,'G',2)
                setNumTxt('totalMem',total,'G',2)
                setNumTxt('rate',(used/total * 100),'%',2)

                setText('td','sysInfoComputerName',result.sysInfoComputerName)
                setText('td','sysInfoComputerIp',result.sysInfoComputerIp)
                setText('td','sysInfoOsName',result.sysInfoOsName)
                setText('td','sysInfoOsArch',result.sysInfoOsArch)
                setText('td','jvmInfoVersion',result.jvmInfoVersion)
                let ms = common.getDateStr().ms
                if(echartData.length > 7){
                    echartData.shift()
                    echartData.push({name:ms,value:used,jvm:jvmInfoTotal})
                }
                else{
                    echartData.push({name:ms,value:used,jvm:jvmInfoTotal})
                }

                // 只加载一次
                if(loadedDom){
                    return
                }
                let files = result.sysFiles
                let html = ``
                files.forEach(item=>{
                    html +=`<li>
                        <p>
                            <span>${item.typeName}</span>
                        </p>
                        磁盘大小&nbsp;<span >${item.total}</span>&nbsp;&nbsp;
                        空闲大小&nbsp;<span >${item.free}</span>&nbsp;&nbsp;
                        <br/>
                        已经使用&nbsp;<span >${item.used}</span>&nbsp;&nbsp;
                        使用概率&nbsp;<span >${item.usage+'%'}</span>
                        <br/>
                    </li>`
                })
                $("#sysFiles").html(html)
                loadedDom = true
            })
            console.log(echartData)
            sysChangeData(echarts,echartData)
        }
        function setNumTxt(id, num, str,bit = 0) {
            count.up(id, {
                time: 4000,
                num: num,
                str: str,
                bit: bit,
                regulator: 50
            })
        }

        function setText(ele,name, text) {
            $(`${ele}[name=${name}]`).text(text)
        }


    });
</script>
</body>
</html>